import React, {useState} from 'react';
import {Layout, Image, theme as antdTheme} from 'antd';
import CustomHeader from "@/components/CustomHeader";
import {Outlet} from "react-router-dom";
import CustomMenu from "@/components/CustomMenu";

const {Header, Content, Footer, Sider} = Layout;


const {useToken} = antdTheme;
const Main: React.FC = () => {
    const {token: {colorBgContainer}} = useToken();
    const [collapsed, setCollapsed] = useState(false);

    /**
     * 折叠菜单栏
     */
    const changeCollapsed = () => {
        setCollapsed(!collapsed)
    }


    return (
        <Layout style={{minHeight: '100vh'}}>
            <Sider collapsed={collapsed}
                   style={{backgroundColor: colorBgContainer, borderRight: 'var(--color-border) solid 1px'}}>
                <div className="demo-logo-vertical">
                    <Image width={24} preview={false} src="../src/assets/logo-v1.png"/>
                    {collapsed ? null : "REACT_ADMIN"}

                </div>
                <CustomMenu/>
            </Sider>
            <Layout>
                <Header style={{backgroundColor: colorBgContainer, height: '88px', padding: '0'}}>
                    <CustomHeader collapsed={collapsed} changeCollapsed={changeCollapsed}/>

                </Header>
                <Content style={{margin: '16px', height: '100%'}}>
                    <Outlet/>
                </Content>
                <Footer style={{textAlign: 'center'}}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};

export default Main;